<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>H5语义化标签的使用</title>
  <link rel="stylesheet" type="text/css" href="css/task02.css">
</head>
<body>
  <header id="header">
    <img src="img/logo-task02.jpg" alt="logo">
    <nav>
      <ul>
        <li><a target="_blank" href="https://alexzhong22c.github.io/">欢迎关注</a></li>
        <li><a target="_blank" href="https://alexzhong22c.github.io/">我的博客</a></li>
        <li><a href="#">导航链接三</a></li>
        <li><a href="#">导航链接四</a></li>
      </ul>      
    </nav>    
  </header>
  <article class="film_review article">
    <header>
      <h1>MDN 关于article标签的demo:</h1>
      <h2>Jurassic Park--h2</h2>
    </header>
    <section class="main_review">
      <p>Dinos were great!</p>
    </section>
    <section class="user_reviews">
      <article class="user_review">
        <p>Way too scary for me.</p>
        <footer>
          <p>
            Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
          </p>
        </footer>
      </article>
      <article class="user_review">
        <p>I agree, dinos are my favorite.</p>
        <footer>
          <p>
            Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
          </p>
        </footer>
      </article>
    </section>
    <footer>
      <p>
        Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
      </p>
    </footer>
  </article>

  <article class="article">
    <h2>文章一级标题--h2</h2>
    <h3>文章二级标题--h3</h3>
    <p class="info"><em>文章作者名</em>&nbsp;<time datetime="2015-05-15 19:00">May 15 2015</time></p>
    <p>em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。换行了！！！！<br />em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。<a target="_blank" href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。<strong>这里有段粗体字</strong>em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。em、i、strong、b这几个元素中，基本上最后才考虑使用b元素。。。。</p>
    <img src="img/logo.jpg" alt="img/logo.jpg">
    <p>一句话总结,xhtml严格要求空标签必须自闭合,html5又不要求自闭合但是兼容xhtml的自闭合写法。。。一句话总结,xhtml严格要求空标签必须自闭合,html5又不要求自闭合但是兼容xhtml的自闭合写法。。。一句话总结,xhtml严格要求空标签必须自闭合,html5又不要求自闭合但是兼容xhtml的自闭合写法。。。<br>img元素记得加alt<strong>这里有段粗体字</strong>img元素记得加alt属性。。img元素记得加alt属性。。img元素记得加alt属性。。<a target="_blank" href="http://ife.baidu.com" target="_blank">打开新窗口链接到http://ife.baidu.com</a>img元素记得加alt属性。。img元素记得加alt属性。。img元素记得加alt属性。。</p>
  </article>
  <article class="article">
    <h2>另一篇文章一级标题--h2</h2>
    <h3>文章二级标题--h3</h3>
    <p class="info"><em>文章作者名</em>&nbsp;<time datetime="2015-05-15 19:00">May 15 2016</time></p>
    <p>一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。换行了<br>一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。<a target="_blank" href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>，这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有段粗体字</strong>一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。一般图片有caption时才使用figure元素和figcaption元素。。。。。</p>
    <img src="img/logo.jpg" alt="img/logo.jpg">
    <ul>
      <li>列表项目一</li>
      <li>列表项目二</li>
      <li>列表项目三</li>
    </ul>
  </article>

  <article class="article">  
    <h2>图片</h2>
    <figure>
      <figcaption>好看的图片</figcaption>
      <img src="img/logo.jpg" alt="img/logo.jpg">
    </figure>  
    <figure>
      <figcaption>好看的图片</figcaption>
      <img src="img/logo.jpg" alt="img/logo.jpg">
    </figure>
    <figure>
      <figcaption>好看的图片</figcaption>
      <img src="img/logo.jpg" alt="img/logo.jpg">
    </figure>
    <h2>对比dl/dt/dd系列标签</h2>
    <dl>
      <dt>好看的图片</dt>
      <dd><img src="img/logo.jpg" alt="img/logo.jpg"></dd>
      <dt>好看的图片</dt>
      <dd><img src="img/logo.jpg" alt="img/logo.jpg"></dd>
      <dt>好看的图片</dt>
      <dd><img src="img/logo.jpg" alt="img/logo.jpg"></dd>
    </dl>
  </article>

  <article class="article">
    <h2>最后一篇文章一级标题--h2</h2>
    <h3>文章二级标题--h3</h3>
    <p class="info"><em>文章作者名</em>&nbsp;<time datetime="2015-05-15 19:00">May 15 2015</time></p>
    <ol>
      <li>排名1</li>
      <li>排名2</li>
      <li>排名3</li>
    </ol>
    <p>
      下面是一个表格，给表格加一个border="1"好让你看出是一个表格<br>
      <strong>thead/tobody/tfoot标签bug挺多的，暂时不要用！！</strong>
      <table border="1">
        <caption>caption 标签必须紧随 table 标签之后</caption>
        <tr class="thead">
          <td>表头</td><td>表头</td><td>表头</td>
        </tr>
        <tr>
          <td rowspan="2">rowspan</td><td>表内容单元格</td><td><a href="#">操作</a></td>
        </tr>
        <tr>
          <!-- <td>表内容单元格</td> --><td>表内容单元格</td><td><a href="#">操作</a></td>
        </tr>
        <tr>
          <td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td>
        </tr>
        <tr>
          <td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td>
        </tr>
        <tr class="tfoot">
          <td>总计</td>
          <td colspan="2">colspan</td>
        </tr>
      </table>
    </p>
    <hr>
  </article>
  <aside>
    <h4>这里以后是一个侧栏，这是侧栏的标题</h4>
    <h5>侧栏注册窗口标题</h5>
    <form>
      <fieldset id="fieldset1">
        <legend>邮箱和密码</legend>
        <label for="mail">请输入邮箱地址：</label>
        <input id="mail" type="text" placeholder="这是一个文本输入框">
        
        <span class="unselectable" onselectstart="return false;" unselectable="on">邮箱地址请按要求格式输入</span><br>

        <label for="passsword">请输入密码：</label>
        <input id="passsword" type="text" placeholder="这是一个文本输入框">
        <span class="unselectable" onselectstart="return false;" unselectable="on">密码请为6-16位英文数字</span><br>

        <label for="repeat">请重复输入密码：</label>
        <input type="text" placeholder="这是一个文本输入框" id="repeat">
        <span class="unselectable" onselectstart="return false;" unselectable="on">密码请为6-16位英文数字</span>      
      </fieldset>
      <fieldset id="fieldset2">
        <legend>其他个人信息</legend>
        <span>性别：</span>
        <label>
          <input type="radio" name="gender">男
        </label>
        <label>
          <input type="radio" name="gender">女
        </label><br>
        <span>城市：</span>
        <select name="city">
          <option selected>北京</option>
          <option>上海</option>
          <option>杭州</option>
        </select><br>
        <span>爱好：</span>
        <label>
          <input type="checkbox" name="hobbies">运动
        </label>
        <label>
          <input type="checkbox" name="hobbies">艺术
        </label>
        <label>
          <input type="checkbox" name="hobbies">科学
        </label><br>
        
        <label for="text" id="textlabel">个人描述：</label>
        <textarea name="description" cols="60" rows="6" placeholder="这是一个多行输入框，输入您的个人描述" id="text"></textarea>
      </fieldset>
      <button>确认提交</button>
    </form>
  </aside>
  <br>
  <footer id="footer">
    <a target="_blank" href="https://alexzhong22c.github.io/">az22c</a>&nbsp;版权所有&copy;
  </footer>
</body>
</html>